<template>
	<view class="detail page">
		<view class="con" v-if="order">
			<!-- <view class="status">{{orderPayStatusOptions[order.mallOrder.payStatus]}}
				{{orderStatusOptions[order.mallOrder.orderStatus]}}
			</view>
			<view class="log border-bottom-1px" v-if="order.mallOrder.orderType ==0">
				<text class="iconfont iconfahuo"></text>
				<view class="log-con">
					<text class="location">单号 {{order.mallOrder.logNo}}</text>
					<span @click="clip" :data-clipboard-text="order.mallOrder.logNo" class="time">点我复制单号</span>
				</view>
			</view> -->
			<view class="address" v-if="order.mallOrder.orderType ==0">
				<text class="iconfont icondizhi"></text>
				<view class="address-con">
					<view class="user">
						<text class="name">{{order.mallOrder.userName}}</text>
						<text class="phone">{{order.mallOrder.mobile}}</text>
					</view>
					<view class="address-detail">
						{{order.mallOrder.address}}
					</view>
				</view>
			</view>

			<view class="order">
				<!--                <div class="title">-->
				<!--                    <img src="@/assets/avatar.png" class="avatar" alt="">-->
				<!--                    <span class="name">衣香丽影官方旗舰店</span>-->
				<!--                </div>-->
				<view class="order-item" v-for="(item,index) in order.mallOrder.items" :key="index">
					<order-item :item="item"></order-item>
					<!--                    <radiusBtn class="btn" color="#A1A1A1" fontSize="0.32rem" borderColor="#DCDCDC" txt="退款"-->
					<!--                               width="1.733rem" height="0.64rem" bgColor="#FFFFFF"></radiusBtn>-->
				</view>


				<view class="log-fee">
					<text class="name">实付款</text>
                   <span class="price">¥ {{order.mallOrder.retailPrice}}</span>
					<text class="price">****</text>
				</view>
			</view>

			<view class="order-info">
				<view class="info-title">订单信息</view>
				<view class="txt">
					<text class="k">订单编号:</text> <text class="v">{{order.mallOrder.orderNo}}</text>
				</view>

				<view class="txt">
					<text class="k">订单状态:</text> <text class="v">{{orderStatusOptions[order.mallOrder.orderStatus]}}</text>
				</view>

				<view class="txt" v-if="order.mallOrder.payStatus">
					<text class="k">支付状态:</text> <text class="v">{{orderPayStatusOptions[order.mallOrder.payStatus]}}</text>
				</view>

				<view class="txt">
					<text class="k">订单类型:</text> <text
						class="v">{{orderTypeStatusOptions[order.mallOrder.orderType]}}</text>
				</view>

<!--                <div class="txt">-->
<!--                    <span class="k">商品金额:</span> <span class="v">{{order.mallOrder.price}}</span>-->
<!--                </div>-->

				<view class="txt" v-if="order.mallOrder.point&&order.mallOrder.point>0">
					<text class="k">使用积分:</text> <text class="v">{{order.mallOrder.point}}</text>
				</view>

				<view class="txt" v-if="order.mallOrder.coupon&&order.mallOrder.coupon>0">
					<text class="k">优惠券抵扣:</text> <text class="v">{{order.mallOrder.coupon}}</text>
				</view>

				<view class="" v-if="order.mallOrder.orderType==0">
					<view class="txt">
						<text class="k">物流公司:</text> <text class="v">{{order.mallOrder.logCompany||''}}</text>
					</view>

					<view class="txt">
						<text class="k">快递单号:</text> <text class="v">{{order.mallOrder.logNo||''}}</text>
					</view>

					<view class="txt">
						<text class="k">物流费:</text> <text class="v">{{order.mallOrder.logFee}}</text>
					</view>

				</view>


				<view class="txt">
					<text class="k">转出方:</text> <text class="v">{{order.fromUser.name}}</text>
				</view>


				<view class="txt">
					<text class="k">接收方:</text> <text class="v">{{order.user.name}}</text>
				</view>

				<!--                <div class="txt">-->
				<!--                    <span class="k">订单交易号:</span> <span class="v">34672865238682560</span>-->
				<!--                </div>-->
				<view class="txt">
					<text class="k">创建时间:</text> <text class="v">0</text>
				</view>
				<view class="txt">
					<text class="k">付款时间:</text> <text class="v">0</text>
				</view>
				<view class="txt">
					<text class="k">发货时间:</text> <text class="v">0</text>
				</view>
			</view>
			<!--            <div class="btns border-top-1px">-->
			<!--                <div class="left border-right-1px">-->
			<!--                    <span class="iconfont iconlianximaijia"></span>-->
			<!--                    <span class="txt">联系卖家</span>-->
			<!--                </div>-->
			<!--                <div class="right">-->
			<!--                    <span class="iconfont iconlianximaijia-dingdanxiangqing"></span>-->
			<!--                    <span class="txt">联系客服</span>-->
			<!--                </div>-->
			<!--            </div>-->

			<view class="order-bar" v-if="userId===order.user.id&&order.mallOrder.oderFrom === 0||order.mallOrder.orderType === 0">
				<radiusBtn @click.native="removeOrder(order.mallOrder.id)" v-if="order.mallOrder.cancel" class="btn" color="#a1a1a1" fontSize="24rpx" borderColor="#a1a1a1" txt="取消订单"
						   width="130rpx" height="52rpx" bgColor="#FFFFFF"></radiusBtn>

				<radiusBtn @click.native="unionOrder" v-if="order.mallOrder.payStatus==0" class="btn" color="#F7895E"
						   fontSize="24rpx"
						   borderColor="#F7895E" txt="立即支付"
						   width="130rpx" height="52rpx" bgColor="#FFFFFF"></radiusBtn>
			</view>

		</view>
	</view>
</template>

<script>
	import {getOrder, unionPay} from "../../api/order";
	import orderItem from '@/components/order-item'
	import radiusBtn from '@/components/radius-btn'
	import {parseTime} from "@/common/js/time";
	import {mapState} from 'vuex'
	// import {config} from "../../util/wx";
	// import Wx from '@/wx'
	import {removeOrder} from "../../api/order";
	// import * as Dialog from '@/dialog'
	// import {mapState} from 'vuex'
	// import ClipboardJS from 'clipboard'
	export default {
		onLoad(option) {
			this.uId=option.id
			this.orderNo = option.orderNo
			this.getOrder()
			// this.userId=localStorage.userId
			let self = this
			if(!this.userId){
				uni.getStorage({
					key:'userId',
					success(res) {
						self.userId = res.data
						
					}
				})
			}
			// console.log(this.userId)
			
		},
		onShow() {
			// this.uId=option.id
			// this.orderNo = option.orderNo
			this.getOrder()
		},
		components: {
			orderItem, radiusBtn
		},
		data() {
			return {
                payConfig: null,
                log: {
                    location: "长沙转运中心公司 已发出，下一站 衡阳转运中心",
                    time: "2019-09-20  16：39：18"
                },
                order: null,
                orderStatusOptions: ["新订单", "配货中", "已发货", "已收货", "退款中", "已退款", "已拒绝", "已完成", "已取消"],
                orderPayStatusOptions: ["未支付", "已支付"],
                orderTypeStatusOptions: ["发货", "转货"],	
				uId:0,
				orderNo:0,
				userId:''
			}
		},
		methods: {
			removeOrder(id){
				// Dialog.showCorrect("暂时关闭,11月22日开放!")
				removeOrder(id).then(res=>{
					uni.showToast({title:'操作成功'})
					uni.navigateBack()
				})
			},
			getOrder() {
				getOrder(this.uId, this.orderNo).then(res => {

					this.order = res.data
					// console.log(this.order)
				})
			},
			parseTime(time) {
				return parseTime(time)
			},
			unionOrder() {
				if (this.payConfig) {
					// this.wxPay()
				} else {
					unionPay(this.order.mallOrder.orderNo).then(res => {
						this.payConfig = res.data
						// this.wxPay()
					})
				}
			}
			// wxPay() {
			// 	Wx.pay(this.payConfig).then(res => {
			// 		// Dialog.showCorrect("操作成功")
			// 		if (res.data == "ok") {
			// 			this.getOrder()
			// 		}

			// 	})
			// }
		},
		computed:{
			
				// userId:{
				// 	get(){
				// 		return this.$store.state.user.user.userId
				// 	},
				// 	set(val){
				// 		console.log(val)
				// 	}
				// }
			// retailPrice() {
			// 	let price = this.order.mallOrder.price
			// 	if (this.order.mallOrder.logFee != null) {
			// 		price = price + this.order.mallOrder.logFee
			// 	}
			// 	if (this.order.mallOrder.coupon != null) {
			// 		price = price - this.order.mallOrder.coupon
			// 	}
			// 	return price
			// }
		}
	}
</script>

<style scoped lang="stylus">
    .detail
        height 100%
        background $page-bg
        z-index 2
        // background url("~@/assets/cbg.png") no-repeat $page-bg
        background-size 100% auto

        .con
            padding 0 20rpx
            /*padding-top 10px*/
            padding-bottom 88rpx

            .status
                color #FFFFFF
                height 80rpx
                text-align left
                line-height 80rpx
                font-size 24rpx
                font-weight 300

            .log
                background-color white
                border-radius 5px 5px 0 0
                display flex
                border-color #DCDCDC
                padding 30rpx 22rpx
                align-items center

                .iconfont
                    color #42A3CC
                    font-size 48rpx
                    flex 0 0 48rpx

                .log-con
                    display flex
                    flex-direction column
                    margin-left 18rpx

                    .location
                        font-size: 22rpx;
                        font-weight: 300;
                        color: rgba(66, 163, 204, 1);
                        line-height 22rpx
                        margin-bottom 20rpx

                    .time
                        color #A1A1A1
                        font-size 20rpx
                        font-weight 300

            .address
                background-color white
                border-radius 0 0 10rpx 10rpx
                display flex
                align-items center
                padding 26rpx 22rpx 24rpx

                .iconfont
                    color #F7895E
                    font-size 48rpx
                    margin-right 16rpx

                .address-con
                    .user
                        font-size 0

                        .name
                            color #6F6F6F
                            font-size: 22rpx;
                            font-weight: 300;

                        .phone
                            color #A1A1A1
                            font-size 22rpx
                            font-weight 300
                            margin-left 54rpx

                    .address-detail
                        padding-right 40rpx
                        margin-top 14rpx
                        color #6F6F6F
                        font-size 22rpx
                        font-weight: 300;
                        line-height 30rpx

            .order
                background-color white
                margin-top 20rpx
                border-radius 5px
                padding 20rpx 20rpx 0

                .title
                    margin-bottom 20rpx
                    height 48rpx
                    /*padding 0 8px*/

                    .avatar
                        vertical-align bottom
                        width 48rpx
                        height 48rpx
                        margin-right 12rpx
                        border-radius 50%

                    .name
                        vertical-align bottom
                        color #4E3D07
                        font-size 28rpx
                        font-weight 300
                        line-height 28rpx

                .order-item
                    position relative

                    .btn
                        position absolute
                        right 0px
                        bottom 0

                .log-fee
                    /*padding-left 2px*/
                    display flex
                    justify-content space-between
                    height 88rpx
                    line-height 44rpx
                    font-size 24rpx

                    .name
                        color #6F6F6F

                    .price
                        color #F7895E

            .order-info
                padding 20rpx 10rpx
                margin-top 20rpx
                border-radius 5px 5px 0 0
                background-color white

                .info-title
                    height 24rpx
                    font-size 22rpx
                    font-weight: 300;
                    padding-left 10rpx
                    border-left 4rpx solid #F7895E

                .txt
                    margin-left 10rpx
                    margin-top 20rpx
                    color #6F6F6F
                    font-size 20rpx
                    font-weight: 300;
                    line-height 20rpx

                    .k
                        display inline-block
                        width 120rpx

            .btns
                margin-bottom 16rpx
                border-radius 0 0 5px 5px
                border-color #DCDCDC
                height 80rpx
                background-color white
                display flex
                align-items center

                .left
                    border-right 2rpx solid #DCDCDC

                .left, .right
                    display flex
                    align-items center
                    justify-content center
                    flex 1
                    height 48rpx
                    font-size 22rpx
                    color #6F6F6F

                    .iconfont
                        margin-right 10rpx
                        font-size 30rpx
                        color #42A3CC

            .order-bar
                display flex
                align-items center
                position fixed
                left 0
                right 0
                bottom 0
                background-color white
                height 88rpx
                justify-content flex-end
                padding-right 20rpx

                .btn
                    margin-left 20rpx


</style>
